<script setup>
/* 
 添加功能
 1. 绑定 v-model
 2. 绑定 @keydown.enter 事件
 3. 父子通讯添加数据
   a. id 使用 +new Date() 时间戳即可
   b. 使用 unshift 方法添加到第一项
   c. 子组件判断 value 值，有内容才添加,添加完后变为 ''
*/
import { ref } from 'vue';

const name = ref('')

const emits = defineEmits(['add'])
const add = () => {
  if (name.value) {
    emits('add', name.value)
    name.value = ''
  }
}
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="name" @keydown.enter="add" />
  </header>
</template>

<style lang="less" scoped>
</style>
